<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getBalance, recharge, withdraw } from '@/api/wallet'
import { toast } from '@/utils/common'

const balance = ref<string>('0.00')
const frozenAmount = ref<string>('0.00')
const rechargeRef = ref()
const rechargeAmount = ref<string>()
const rechargeLoading = ref<boolean>(false)

const withdrawRef = ref()
const withdrawAmount = ref<string>()
const withdrawLoading = ref<boolean>(false)

const loadBalance = async () => {
  const res = await getBalance()
  balance.value = res.data.balance
  frozenAmount.value = res.data.frozenAmount
}
onLoad(async () => {
  await loadBalance()
})

const jumpToRecord = () => {
  uni.navigateTo({
    url: '/pages/wallet/record'
  })
}
const showRecharge = () => {
  rechargeRef.value.open()
}
const optRecharge = async () => {
  if (!rechargeAmount.value) {
    toast('请输入充值金额')
    return
  }
  if (Number(rechargeAmount.value) <= 0) {
    toast('充值金额不能大于0')
    return
  }
  try {
    rechargeLoading.value = true
    const res = await recharge(Number(rechargeAmount.value))
    toast(res.tips)
    rechargeRef.value.close()
    await loadBalance()
  } catch (e) {
    toast(e.tips)
  } finally {
    rechargeLoading.value = false
  }
}
const showWithdraw = () => {
  withdrawRef.value.open()
}
const optWithdraw = async () => {
  if (!withdrawAmount.value) {
    toast('请输入提现金额')
    return
  }
  if (Number(withdrawAmount.value) <= 0) {
    toast('提现金额必须大于0')
    return
  }
  try {
    withdrawLoading.value = true
    const res = await withdraw(Number(withdrawAmount.value))
    toast(res.tips)
    withdrawRef.value.close()
    await loadBalance()
  } catch (e) {
    toast(e.tips)
  } finally {
    withdrawLoading.value = false
  }
}

const onAmountInput = (value: string) => {
  if (value.indexOf('.') === -1) {
    return value
  }
  const arr = value.split('.')
  if (arr[1].length > 2) {
    return arr[0] + '.' + arr[1].substring(0, 2)
  }
  return value
}

</script>

<template>
  <view class="wallet">
    <view class="wallet-top">
      <uv-text text="余额明细" @click="jumpToRecord" size="16"></uv-text>
    </view>
    <view class="wallet-mid">
      <view class="wallet-mid-icon">￥</view>
      <view class="wallet-mid-title">可用余额</view>
      <view class="wallet-mid-blance">
        <view class="wallet-mid-blance-sign">￥</view>
        <view class="wallet-mid-blance-text">{{ balance }}</view>
      </view>
    </view>
    <view class="wallet-bottom">
      <uv-button @click="showRecharge" color="#ff7744" style="margin-bottom: 20rpx;" text="充值"></uv-button>
      <uv-button @click="showWithdraw" color="#eee" :customTextStyle="{ color: '#000' }" text="提现"></uv-button>
    </view>
    <uv-popup ref="rechargeRef" mode="bottom">
      <view class="popup">
        <view class="popup-title">充值</view>
        <uv-input type="digit" placeholder="请输入充值金额" v-model="rechargeAmount" :formatter="onAmountInput"></uv-input>
        <view class="popup-btn">
          <uv-button color="#ff7744" @click="optRecharge" :loading="rechargeLoading">确定</uv-button>
        </view>
      </view>
    </uv-popup>
    <uv-popup ref="withdrawRef" mode="bottom">
      <view class="popup">
        <view class="popup-title">提现</view>
        <uv-input type="digit" placeholder="请输入提现金额" v-model="withdrawAmount" @change="onAmountInput"></uv-input>
        <view class="popup-btn">
          <uv-button color="#ff7744" @click="optWithdraw" :loading="withdrawLoading">确定</uv-button>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<style lang="scss" scoped>
.wallet {
  padding: 20rpx;
  background-color: #fff;
  height: calc(100vh - 40rpx - calc(44px + env(safe-area-inset-top)));

  .wallet-top {
    display: flex;
    margin-bottom: 100rpx;

    .uv-text {
      justify-content: flex-end !important;
    }
  }

  .wallet-mid {
    display: flex;
    flex-direction: column;

    &-icon {
      margin: 0 auto;
      width: 100rpx;
      height: 100rpx;
      background-color: #f59f59;
      text-align: center;
      line-height: 100rpx;
      font-size: 50rpx;
      color: #fff;
      border-radius: 50%;
      margin-bottom: 60rpx;
    }

    &-title {
      text-align: center;
      margin-bottom: 10rpx;
    }

    &-blance {
      display: flex;
      height: 100rpx;
      justify-content: center;
      align-items: center;

      &-sign {
        font-size: 40rpx;
        line-height: 100rpx;
        font-weight: bold;
      }

      &-text {
        font-size: 70rpx;
        line-height: 100rpx;
        font-weight: bold;
      }
    }
  }

  .wallet-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80%;

    .uv-button-wrapper {
      width: 40% !important;
    }
  }
}

.popup {
  padding: 20rpx;

  .popup-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    text-align: center;
  }

  .uv-input {
    border-radius: 12rpx;
  }

  .popup-btn {
    margin-top: 10%;
    margin-bottom: 80rpx;
  }
}
</style>